
<template>
  <div class="app-header">
    <div class="login">
      <img
        v-if="userStore.logostyletype == 1"
        style="width: 118px; height: 24px"
        :src="userStore.logoimg()"
        alt=""
      />
      <img
        v-if="userStore.logostyletype == 3"
        style="width: 55px; height: 55px"
        :src="userStore.logoimg()"
        alt=""
      />
      <img v-if="userStore.logostyletype == 2" style="width: 118px; height: 44px" :src="userStore.logoimg()" alt="" />
    </div>
    <div class="header">
      <app-menu />
      <div style="display: flex; align-items: center">
        <!-- <app-waring /> -->
        <app-message />
        <div class="avatar" @click="selectMenu({ value: 'user' }, 0)">
          {{ userStore.user ? getFirstLetter(userStore.user.user_name) : '' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import touxiang from '@/assets/menu/touxiang.png'
import { http } from '@/utils/http'
import config from '@/config'
const userStore = useUserStore()

const handleCommand = command => {
  userStore.logout()
}
const router = useRouter()
const sotre = useAppStore()
const { menuIndex, selectMenu } = toRefs(sotre)

const unreadcount = ref(0)
let uncountIntervalId

const getFirstLetter = str => {
  return str.trim().charAt(0)
}

const goMessage = () => {
  router.replace('message')
}

const getunreadcount = () => {
  clearInterval(uncountIntervalId)
  http.get('/message/unread_count').then(res => {
    unreadcount.value = res.data.unread_count
    uncountIntervalId = setInterval(() => {
      getunreadcount()
    }, 10000)
  })
}
onMounted(() => {
  // getunreadcount()
})
onUnmounted(() => {
  clearInterval(uncountIntervalId)
})
</script>

<style lang="scss" scoped>
.app-header {
  width: 100%;
  height: 64px;
  min-height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  background-color: #fff;
}
.header {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.avatar {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin-left: 24px;
  background-image: url('@/assets/menu/touxiang.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>